<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>下拉多选-v4</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">formSelects-v4.js</div>
                <div class="layui-card-body">一个基于layui扩展的select多选插件</div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">下拉多选插件,手册: <a target="_blank" href="http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html">http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html</a></div>
                <div class="layui-card-body">

                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">多选框</label>
                            <div class="layui-input-block">
                                <select name="city" xm-select="city1">
                                    <option value="1" disabled="disabled">北京</option>
                                    <option value="2" selected="selected" disabled="disabled">上海</option>
                                    <option value="3">广州</option>
                                    <option value="4" selected="selected">深圳</option>
                                    <option value="5">天津</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">单选</label>
                            <div class="layui-input-block">
                                <select name="city" xm-select="city2" xm-select-radio>
                                    <option value="1" disabled="disabled">北京</option>
                                    <option value="2" selected="selected">上海</option>
                                    <option value="3">广州</option>
                                    <option value="4" selected="selected">深圳</option>
                                    <option value="5">天津</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">禁用选择框</label>
                            <div class="layui-input-block">
                                <select name="city" xm-select="city3" disabled="disabled">
                                    <option value="1" disabled="disabled">北京</option>
                                    <option value="2" selected="selected">上海</option>
                                    <option value="3">广州</option>
                                    <option value="4" selected="selected">深圳</option>
                                    <option value="5">天津</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <form class="layui-form mar-btm" action="">
                        <div class="layui-form-item">
                            <select name="city" xm-select="select-city" xm-select-max="3">
                                <option value="1" disabled="disabled">北京</option>
                                <option value="2" selected="selected">上海</option>
                                <option value="3">广州</option>
                                <option value="4" selected="selected">深圳</option>
                                <option value="5">天津</option>
                            </select>
                        </div>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius get-selects">获取选中数据</button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius set-selects">动态赋值</button>
                    </form>

                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.config({base: '../js/'}).extend({formSelects: 'formSelects-v4'}).use(['layer','form','formSelects'],function(){
    var $ = layui.$, layer = layui.layer, form = layui.form, formSelects = layui.formSelects;

    // 获取选中数据
    $(document).on('click','.get-selects',function(){
        var value = formSelects.value('select-city');                   // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
        var all = formSelects.value('select-city', 'all');              // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
        var val = formSelects.value('select-city', 'val');              // ["2","4"]
        var valStr = formSelects.value('select-city', 'valStr');        // 2,4
        var name = formSelects.value('select-city', 'name');            // ["上海","深圳"]
        var nameStr = formSelects.value('select-city', 'nameStr');      // 上海,深圳
        console.log(value,all,val,valStr,name,nameStr);
        layer.alert( JSON.stringify(valStr) );
    });

    // 动态赋值
    $(document).on('click','.set-selects',function(){
        formSelects.value('select-city', [1,3]);
    });


    //formSelects.array('select');		// 获取选中的值
    //formSelects.value('select', [1,3]);	// 动态赋值

});
</script>
</body>
</html>